<template>
	<view class="appointment-btn" @click="onClick">
		<u-button v-if="isInProgress" type="primary" :text="text" :customStyle="btnStyle"></u-button>
		<u-button v-if="isCancel" type="warning" :text="text" :disabled="true" :customStyle="invalidBtnStyle" :hairline="true"></u-button>
		<u-button v-if="isInvalid" type="warning" :text="text" :disabled="true" :customStyle="cancelBtnStyle" :hairline="true"></u-button>
		<u-button v-if="isArrival" type="success" :text="text" :disabled="true" :customStyle="btnStyle" :hairline="true"></u-button>
	</view>
</template>

<script>
	import FormStatusEnum from '@/common/enum/FormStatus.js'
	export default {
		name: "appointmentBtn",
		props: {
			text: {
				type: String
			},

			status: {
				type: Number
			},
			
			// 是否已过期
			invalid: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				btnStyle: {
					width: '140rpx',
					height: '53rpx',
					borderRadius: '5px'
				},
				
				cancelBtnStyle: {
					width: '140rpx',
					height: '53rpx',
					borderRadius: '5px',
					backgroundColor: '#fff',
					borderColor: '#B4B3B1',
					color: '#B4B3B1',
					opacity: 1
				},
				
				invalidBtnStyle: {
					width: '140rpx',
					height: '53rpx',
					borderRadius: '5px',
				}
			};
		},
		computed: {
			// 状态是否预约中
			isInProgress() {
				return (this.status === FormStatusEnum.IN_PROGRESS.value) && !this.invalid
			},
			
			isInvalid() {
				return (this.status === FormStatusEnum.IN_PROGRESS.value) && this.invalid
			},
			
			isArrival() {
				return (this.status === FormStatusEnum.ARRIVAL.value)
			},
			
			isCancel() {
				return (this.status === FormStatusEnum.CANCELLED.value)
			}
		},
		methods: {
			onClick() {
				if(this.isInProgress) {
					this.$emit('detail')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.appointment-btn {}
</style>
